/*
 * @Author: your name
 * @Date: 2021-02-19 16:36:56
 * @LastEditTime: 2021-03-02 15:38:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xgwsp_frontendd:\project\vue3-vite-tsx-master\src\views\Login.tsx
 */
import { defineComponent, ref, unref } from 'vue';

import useUserLogin from 'hooks/useUserLogin';

export default defineComponent({
  setup() {
    const { loginInfo, loginForm, loginRules, handleSubmit, loading } = useUserLogin();

    return () => (
      <div class="main-login h-screen flex justify-center items-center">
        <div
          class="bg-white w-500px rounded-4px  pl-20px pr-20px pt-20px pb-20px"
          style="height:345px"
        >
          <h2 class="leading-loose text-center text-24 font-bold text-login">
            孝感市垃圾费管理系统
          </h2>
          <h3 class="mb-20px  text-center text-16 font-bold text-login">
            Garbage Disposal Fee Infromation System of Xiaogan
          </h3>
          <a-form layout="vertical" ref={loginForm} model={loginInfo} rules={loginRules}>
            <a-form-item name="userName">
              <a-input
                v-model={[loginInfo.userName, 'value']}
                size="large"
                placeholder="请输入用户名/账号"
              ></a-input>
            </a-form-item>

            <a-form-item name="password">
              <a-input
                type="password"
                size="large"
                v-model={[loginInfo.password, 'value']}
                placeholder="请输入账号密码"
              ></a-input>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                loading={loading.value}
                size="large"
                block
                onClick={handleSubmit}
              >
                登录
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
    );
  },
});
